<template>
  <view class="page" v-if="shenheStatus == 0">
    <view class="page-bg">
      <view></view>
    </view>
    <view class="content" v-if="data">
      <pageHeader :showEwm="true" :data="data"></pageHeader>

      <view class="page-header">
        <view class="item" @click="toUrl('/shareholder/finance/commission')">
          <view class="tit">
            累计佣金(元)
            <i class="iconfont icon-arrow-right"></i>
          </view>
          <view class="price">{{ data.total_price || "0.00" }}</view>
        </view>
        <!-- <view class="item" @click="toUrl('/shareholder/team/index')">
          <view class="tit">
            团队人数
            <i class="iconfont icon-arrow-right"></i>
          </view>
          <view class="price">{{ data.team_count || "0" }}</view>
        </view> -->
      </view>

      <view class="page-price">
        <view class="hd">
          <view class="hd-let">
            <view class="em">可提现(元)</view>
            <view class="num on">{{ data.cash_profit || "0.00" }}</view>
          </view>

          <view class="hd-rig" @click="toUrl('/shareholder/finance/withdraw')">
            <view class="em">
              提现记录
              <i class="iconfont icon-arrow-right"></i>
            </view>
          </view>
        </view>

        <view class="bd">
          <view
            class="item"
            @click="toUrl('/shareholder/finance/commission?status=1')"
          >
            <view class="em">
              待入账(元)
              <i class="iconfont icon-arrow-right"></i>
            </view>
            <view class="num">{{ data.no_send || "0.00" }}</view>
          </view>
          <view
            class="item"
            @click="toUrl('/shareholder/finance/withdraw?status=1')"
          >
            <view class="em">
              提现中(元)
              <i class="iconfont icon-arrow-right"></i>
            </view>
            <view class="num">{{ data.cash_price_apply || "0.00" }}</view>
          </view>
          <view
            class="item"
            @click="toUrl('/shareholder/finance/commission?status=2')"
          >
            <view class="em">
              已提现(元)
              <i class="iconfont icon-arrow-right"></i>
            </view>
            <view class="num">{{ data.cash_price || "0.00" }}</view>
          </view>
        </view>

        <view class="btn" @click="toUrl('/shareholder/withdraw/index')"
          >立即提现</view
        >
      </view>

      <view class="page-title">常用工具</view>

      <view class="page-tools">
        <view class="item" @click="toUrl(`/shareholder/order/list?type=1`)">
          <image
            :src="require('../images/index-icon1.png')"
            mode="aspectFill"
          ></image>
          <view class="info">
            <view class="tit">订单列表</view>
            <view class="des">{{ data.order_count || "0" }}笔</view>
          </view>
        </view>
        <view class="item" @click="toUrl('/shareholder/level/level')">
          <image
            :src="require('../images/index-icon2.png')"
            mode="aspectFill"
          ></image>
          <view class="info">
            <view class="tit">等级</view>
            <view class="des">会员等级查询</view>
          </view>
        </view>
        <view class="item" @click="toUrl('/chain/commission/index')">
          <image
            :src="require('../images/index-icon3.png')"
            mode="aspectFill"
          ></image>
          <view class="info">
            <view class="tit">奖金明细</view>
            <view class="des">奖金汇总</view>
          </view>
        </view>
        <view class="item" @click="toUrl('/chain/frozenAmount/index')">
          <image
            :src="require('../images/index-icon4.png')"
            mode="aspectFill"
          ></image>
          <view class="info">
            <view class="tit">帮扶佣金</view>
            <view class="des">佣金汇总</view>
          </view>
        </view>
        <view class="item" @click="toUrl('/shareholder/team/index?type=1')">
          <image
            :src="require('../images/index-icon5.png')"
            mode="aspectFill"
          ></image>
          <view class="info">
            <view class="tit">团队数据</view>
            <view class="des">{{ data.team_count || "0" }}人</view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import pageHeader from "../components/page-header.vue";

export default {
  components: {
    Shenhe,
    pageHeader,
  },

  data() {
    return {
      data: null,
    };
  },

  async onShow() {
    const res = await this.$allrequest.shareholder.index({
      type: 1,
    });
    this.data = res.data;
  },

  methods: {
    toUrl(url) {
      this.$utils.toUrl(url);
    },
  },
};
</script>

<style lang="less" scoped>
.page {
  position: relative;
  background: #f2f2f2;
  min-height: 100vh;
  padding: 0rpx 24rpx 60rpx;
}

.content {
  position: relative;
  z-index: 3;
}

.page-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  padding-top: 336rpx;
  background: #f0250e;

  view {
    height: 220rpx;
    background: linear-gradient(180deg, #f0250e 0%, #f2f2f2 100%);
  }
}

.page-header {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 12rpx;
  padding: 0 40rpx;
  height: 184rpx;
  background: linear-gradient(180deg, #f6f6fc 0%, #f1effa 100%);
  border-radius: 20rpx 20rpx 0px 0px;

  .item {
    flex: 1;
    overflow: hidden;
  }

  .tit {
    padding-bottom: 5rpx;
    font-size: 24rpx;
    color: #8c8c8c;
  }

  .price {
    font-size: 48rpx;
    color: #262626;
    font-weight: bold;
  }

  &:after,
  &:before {
    content: "";
    position: absolute;
    bottom: 0;
    background: #eee5e5;
  }

  &:before {
    left: -12rpx;
    border-color: red transparent;
    border-width: 12rpx 12rpx 0 0;
    border-style: solid;
  }

  &:after {
    right: -12rpx;
    border-color: red transparent;
    border-width: 12rpx 0 0 12rpx;
    border-style: solid;
  }
}

.page-price {
  padding: 48rpx 52rpx;
  border-radius: 0px 0px 20rpx 20rpx;
  background: #fff;

  .hd {
    display: flex;
  }

  .hd-let {
    flex: 1;
    overflow: hidden;
  }

  .hd-rig {
    padding-top: 4rpx;
  }

  .em {
    padding-bottom: 4rpx;
    font-size: 26rpx;
    color: #8c8c8c;
  }

  .num {
    font-size: 36rpx;
    color: #262626;
    font-weight: bold;

    &.on {
      font-size: 40rpx;
      color: #f0250e;
    }
  }

  .bd {
    display: flex;
    justify-content: space-between;
    padding: 48rpx 0;

    .item {
      max-width: 33.33%;
    }
  }

  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96rpx;
    background: linear-gradient(180deg, #fe4638 0%, #fe6e2b 100%);
    box-shadow: 0px 6rpx 12rpx rgba(240, 37, 14, 0.16);
    border-radius: 32px;
    font-size: 30rpx;
    color: #fff;
  }
}

.iconfont {
  font-size: 16rpx;
  color: #8c8c8c;
}

.page-title {
  padding: 30rpx 0;
  font-size: 30rpx;
  font-weight: bold;
  color: #262626;
}

.page-tools {
  display: flex;
  flex-wrap: wrap;
  padding: 25rpx 40rpx;
  background: #fff;
  border-radius: 20rpx;

  .item {
    display: flex;
    padding: 35rpx 0;
    width: 50%;
  }

  image {
    width: 70rpx;
    height: 70rpx;
  }

  .info {
    flex: 1;
    overflow: hidden;
    margin-left: 20rpx;
  }

  .tit {
    font-size: 26rpx;
    font-weight: bold;
    color: #262626;
  }

  .des {
    font-size: 24rpx;
    color: #8c8c8c;
  }
}

.iconfont {
  display: inline-block;
  vertical-align: middle;
}
</style>
